<template>
    <div>
        <el-table v-loading="loading" :data="list" border fit highlight-current-row @selection-change="select">
            <el-table-column
                    align="center"
                    width="60px"
                    type="selection"
            />
            <el-table-column align="center" width="120px" label="名称">
                <template slot-scope="scope">
                    <span>{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" width="140px" label="学号">
                <template slot-scope="scope">
                    <span>{{ scope.row.learn_number }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" width="120px" label="年级">
                <template slot-scope="scope">
                    <span>{{ scope.row.grade }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" width="140px" label="加入时间">
                <template slot-scope="scope">
                    <span>{{ scope.row.createdAt | parseTime('{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" width="auto" min-width="149px" label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" plain size="small" @click="edit(scope.row)">
                        <span><svg-icon :icon-class="'eye-open'" />查看作品</span>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 10px;">
            <el-button
                    :disabled="stuSelected.length === 0"
                    :loading="addLoading"
                    type="primary"
                    plain
                    size="medium"
                    @click="handleStudent"
            >
                将选中学生添加到
            </el-button>
            <el-select v-model="curClass" value="">
                <el-option
                        v-for="item in classes"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                />
                <el-option label="取消分配" value="-1" />
            </el-select>
            <pagination v-show="total>0" :total="total" :page.sync="query.page" :limit.sync="query.limit" @pagination="() => { this.$reload() }" />
        </div>
    </div>
</template>

<script>
import Pagination from '../../../components/Pagination'
import { addStuToClass } from '../../../api/class'
export default {
  name: 'StuTable',
  components: { Pagination },
  props: {
    list: {
      type: Array,
      default: function() {
        return []
      }
    },
    classes: {
      type: Array,
      default: function() {
        return ['-1']
      }
    },
    loading: {
      type: Boolean,
      default: true
    },
    total: {
      type: Number,
      default: null
    },
    query: {
      type: Object,
      default: function() {
        return {
          page: 1,
          limit: 20,
          name: null,
          sort: '+id'
        }
      }
    }
  },
  data() {
    return {
      stuSelected: [],
      addLoading: false,
      curClass: '-1'
    }
  },
  methods: {
    edit(item) {
      this.$emit('edit', item)
    },
    select(val) {
      this.stuSelected = val
    },
    handleStudent() {
      const list = []
      for (const item of this.stuSelected) {
        list.push(item.id)
      }
      this.addLoading = true
      addStuToClass(this.curClass, { list: list }).then(() => {
        this.$SUCCESS(this.curClass === '-1' ? '取消分配成功' : '学员添加成功')
        this.addLoading = false
      }).catch(() => {
        this.$ERROR('学员添加失败')
        this.addLoading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
